import { Graph } from "@antv/x6";
export let graph = null;

export function initGraph(el) {
  // 基础配置
  graph = new Graph({
    container: el,
    autoResize: true,
    panning: {
      enabled: true,
    },
    mousewheel: {
      enabled: true,
    },
    embedding: {
      // 合并节点配置，功能有点冲突，必要再重新写
      // enabled: true,
      // findParent({ node }) {
      //     // console.log(node.getData());

      //     // return node.getBBox();
      //     const bbox = node.getBBox();
      //     console.log(bbox)
      //     return this.getNodes().filter((node) => { // 触发合并节点的判定范围
      //         console.log(node)
      //         if (node.getData().isChild) {
      //             return node.getParent()
      //         }
      //         const data = node.getData();
      //         let embeddingPadding = 20;
      //         if (node.getNodeData) {
      //             embeddingPadding = node.getNodeData().embeddingPadding;
      //         }
      //         return (
      //             data && embeddingPadding &&
      //             bbox.isIntersectWithRect(node.getBBox().inflate(embeddingPadding))
      //         );
      //     });
      // }
    },
    connecting: {
      // 连线配置
      // snap: true, // 不配置自动吸附。配置了之后 对于边与边的交互会默认吸附到 50%位置。
      router: {
        name: "manhattan", // orth(正交) | oneSide(受限正交) | manhattan(智能正交) | metro(智能地铁) | er(实体关系)
        args: {
          excludeShapes: ["text-block", 'TextNode'], // 排除的节点
          padding: 30, // 间距
          step: 5, // 步长(计算精度，如果太小会造成拖拽的时候产生性能问题，要不就拖拽的时候降级为 orth )
        },
      },
      allowEdge: true, // 是否允许边交互
      allowBlank: true, // 是否允许边空白处点击
      edgeAnchor: {
        name: 'ratio',
        args: {
          ratio: 0.5,
        }
      },
      connector: {
        // 连线样式
        name: "jumpover", // normal(直线) | rounded(圆角) | smooth(平滑) | jumpover(跳跃)
        args: {
          type: "cubic", // gap(间隔) | cubic | arc
        },
      },
      connectionPoint: {
        // 连线点
        name: "boundary", // boundary(边界) | anchor(锚点)
      },
    },

    grid: {
      type: 'doubleMesh', // doubleMesh | mesh | dot | fixedDot
      visible: true,
      size: 5,
      args: [
        {
          color: '#cccccc', // 主网格线颜色
          thickness: 1,  // 主网格线宽度
        },
        {
          color: '#cccccc', // 次网格线颜色
          thickness: 2,  // 次网格线宽度
          factor: 5,     // 主次网格线间隔
        },
      ],
    },
    background: {
      color: "#fff", // 画布背景颜色
    },
  });
  return graph;
}
